<template>
	<div  v-loading="loading" class="main-box">
		<div class="dl-row-sb tk-box">
			<div class="item tk01">
				<h1 @click="openPractice(true)">专项检测</h1>
			</div>
			<div class="item tk03">
				<h1 @click="allPractice()">综合检测</h1>
			</div>
		</div>
		<el-dialog title="专项检测题目选择" :visible.sync="typeQue" :close-on-click-modal="false"   width="550px">
		    <el-form ref="form" size="small" label-width="100px" :rules="bankRules">
		        <el-form-item label="题库">
					<el-select class="filter-item" style="width: 350px;" @change="getBankKeyWords(query.bankId)" prop="bankId" v-model="query.bankId" clearable filterable placeholder="请选择题库">
					  <el-option
					    v-for="item in bankList"
					    :key="item.id"
					    :label="item.bankName"
					    :value="item.id">
					  </el-option>
					</el-select>
		            <!-- <el-input-number v-model.number="singleNum" style="width: 200px;" step-strictly :min="0" :max="50"
		                             controls-position="right" :disabled="isEdit"/> -->
		        </el-form-item>
		        <el-form-item label="题目标签">
					<el-select class="filter-item" style="width: 350px;" prop="source" @change="info"  v-model="bankKeyWordsObj" clearable filterable placeholder="请选择题目标签">
					  <el-option
					    v-for="(item,index) in keyWordsList"
					    :key="index"
					    :label="item.keywords"
					    :value="item">
					  </el-option>
					</el-select>
<!-- 		            <el-input-number v-model.number="multipleNum" style="width: 250px;" step-strictly :min="0" :max="50"
		                             controls-position="right" :disabled="isEdit"/> -->
		        </el-form-item>
		        <el-form-item label="题目数量">
		            <el-input-number v-model.number="bankNum" style="width: 350px;" step-strictly :min="0" :max="50"
		                             controls-position="right" :disabled="isEdit"/>
		        </el-form-item>
		    </el-form>
		    <div slot="footer" class="dialog-footer">
		        <el-button type="text" @click="typeQue=false">取消</el-button>
		        <el-button type="primary" @click="typePractice">确认</el-button>
		    </div>
		</el-dialog>
	</div>	
</template>

<script>
    import {tree} from '@/api/specialty'
    import {getBankListKeyWords,getBankList} from '@/api/bank'

    export default {
        components: {},
        data() {
            return {
				loading:false,
                typeQue: false,
				isEdit:false,
				bankNum:20,
                singleNum: 10,
                multipleNum: 5,
                judgeNum: 5,
				query:{},
				bankKeyWordsObj:null,
				bankKeyWords:"",
                activeName: 'all',
                activeNames: ['1'],
                parentZy: '',
                bankList: [],
				keyWordsList:[],
				bankRules: {
				  bankId: [{ required: true, trigger: 'blur', message: '请选择提题库' }],
				  source: [{ required: true, trigger: 'blur', message: '请选择题目标签' }],
				},
            }
        },
        created() {
            this.$nextTick(() => {
                this.getBankLs()
            });
        },
        methods: {
			getBankLs(){
				this.loading=true
				getBankList().then(res=>{
					if(res!='' && res!=null){
						this.bankList=res;
					}
					this.loading=false
				}).catch(res=>{
					this.loading=false
				})
			},
			getBankKeyWords(id){
				this.loading=true
				this.bankKeyWordsObj=null;
				var params={
					bankId:id
				}
				getBankListKeyWords(params).then(res=>{
					if(res!='' && res!=null){
						this.keyWordsList=res;
						
					}else{
						this.$message.success(`无标签数据，请重选选择题库！`)
					}
					this.loading=false
				}).catch(res=>{
					this.loading=false
				})
			},
			info(value){
				if(value.totalNum<20){
					this.$message.error(`当前标签题目不足20道试题！！！`)
				}
				this.bankKeyWordsObj=value.keywords;
				this.bankKeyWords=value.keywords;
			},
            openPractice(isEdit) {
              	this.typeQue=true;
              	this.isEdit=isEdit;
            },
			//专项检测
			typePractice() {
				if (this.query.bankId == "" || this.query.bankId ==null) {
					this.$message.error(`请选择题库！`)
					return
				}
				if (this.bankKeyWords == "" || this.bankKeyWords ==null) {
					this.$message.error(`请选择题目标签！`)
					return
				}
				//
			    let bankIds = [this.query.bankId]				
			    this.$router.push({
			        name: "practiceDetails",
			        params: {
			            bankList: bankIds,
						keyWords:this.bankKeyWords,
						checkType:"专项检测",
			            singleNum: this.singleNum,
			            multipleNum: this.multipleNum,
			            judgeNum: this.judgeNum,
			        }
			    })
			},
			//综合检测
            allPractice() {
				if (this.bankList.length === 0) {
					this.$message.error(`暂无相应的题库可以开展综合检测！`)
					return
				}
				this.$confirm('综合测验模块会从全题库中随机挑选题目, 是否继续?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'success'
				}).then(() => {
					let bankIds = []
					if (this.bankList.length > 0) {
					    bankIds = this.bankList.map(item => item.id)
					}
					this.$router.push({
					    name: "practiceDetails",
					    params: {
					        bankList: bankIds,
							checkType:"综合检测",
					        singleNum: this.singleNum,
					        multipleNum: this.multipleNum,
					        judgeNum: this.judgeNum,
					    }
					})
				}).catch(() => {
				   this.$message({
				     type: 'error',
				     message: '已取消'
				   });
				});
            }
        },
    }
</script>

<style lang="scss" scoped>
	.main-box{
		 min-height: calc(100vh - 254px);
	}
	.condition-box {
	    padding: 30px 30px 30px 15px;
	}
	.condition-box .item h1{
		width: 70px;
	}
    .class-box {
        .left {
            width: 230px;
            padding: 25px 0;

            .bg-blue-500 {
                background: #0068B6;
            }

            .py-3 {
                margin-bottom: 5px;
            }

            span {
                font-size: 16px;
                font-weight: 400;
                color: #545C63;
            }

            .text-white span {
                color: #ffffff;
            }
        }

        .right {
            width: 1110px;
        }
    }

    .tab-box {
        margin-left: 20px;
    }

    .tk-box {
        margin: 120px;

        .item {
            width: 260px;
            height: 100px;
            border-radius: 12px;
            cursor: pointer;

            h1 {
                font-size: 20px;
                font-weight: bold;
                color: #0068B6;
                margin-left: 30px;
                line-height: 100px;
            }
        }

        .item:hover h1 {
            text-decoration: underline;
        }

        .tk01 {
            background: url("../../../assets/image/tk01.png") no-repeat;
        }
        
        .tk02 {
            background: url("../../../assets/image/tk02.png") no-repeat;
        }
        
        .tk03 {
            background: url("../../../assets/image/tk03.png") no-repeat;
        }
        
        .tk04 {
            background: url("../../../assets/image/tk04.png") no-repeat;
        }
    }

    .ddp-box {
        flex-wrap: wrap;
        //margin-top: 20px;
        li {
            background: #f6f6f6;
            width: 48.5%;
            margin-bottom: 30px;
            padding: 20px 30px;
            border-radius: 12px;

            h1 {
                font-size: 18px;
                font-weight: bold;
                color: #1A1A1A;
                margin-bottom: 5px;
            }

            p {
                font-size: 14px;
                color: #999999;
            }
        }

        .dan {
            background: #F3F8FB;
        }

        .duo {
            background: #FFF9ED;
        }

        .pan {
            background: #FFF5F5;
        }

        .dan:hover {
            background: #E3F3FF;
            cursor: pointer;
        }

        .dan:hover h1 {
            color: #0068B6;
        }

        .duo:hover {
            background: #FFF3DD;
            cursor: pointer;
        }

        .duo:hover h1 {
            color: #DC5F05;
        }

        .pan:hover {
            background: #FDE8E8;
            cursor: pointer;
        }

        .pan:hover h1 {
            color: #D82C2C;
        }
    }
</style>
